<template>
    <div>
        <h1>父组件</h1>
        <ChildrenVue v-if="show" :info="info" :obj="obj" :msg="msg" @fun="fun"></ChildrenVue>
        <button @click="showItem">点击重载</button>
        <hr>
        <h1>计算属性和监听器</h1>
        <input type="text" v-model="user.firstName"><br>
        <input type="text" v-model="user.lastName"><br>
        <input type="text" v-model="fullName"><br>
        <input type="text" v-model="fullName2"><br>
        <input type="text" v-model="fullName3"><br>
        <input type="text" v-model="fullName4"><br>
    </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated,ref ,reactive, provide,computed,watch,watchEffect} from 'vue'
import ChildrenVue from './Children.vue';
export default defineComponent({
    setup () {
        let show = ref(true);
        function showItem(){
            show.value = !show.value;
        }
        const info = ref('测试一下 子组件能否收到父组件传递过来的数据');
        const msg = ref('attrs传过来的数据');
        let obj = reactive({
            name:'tom',
            age:18
        });
        let user = reactive({
            firstName:'段',
            lastName:'艺璇'
        });
        const fullName = computed(()=>{
            return user.firstName + '-' + user.lastName;//只写get只能获取到不能做到修改还会更新
        })
        const fullName2 = computed({
            get(){
                return user.firstName + '-' + user.lastName;
            },
            set(value:string){//set 如果修改了get里的值 就回触发set方法 可以做一些操作
                console.log(value);
                let arr = value.split('-');
                user.firstName = arr[0];
                user.lastName = arr[1];
            }
        })
        const fullName3 = ref('');//给一个默认值
        watch(user,()=>{
            fullName3.value = user.firstName + '-' + user.lastName;
        },{deep:true,immediate:true});
        watch(fullName3,(newValue:string,oldValue)=>{
            console.log(newValue);//更改后的新值
            console.log(oldValue);//更改前的旧值
            let arr = newValue.split('-');
            user.firstName = arr[0];
            user.lastName = arr[1];
        });
        const fullName4 = ref('');
        watchEffect(()=>{
            fullName4.value = user.firstName + '-' + user.lastName;
        })
        const message = 'provide传过来的值';
        provide('message',message)
        onBeforeMount(()=>{
            console.log('父元素的onBeforeMount')
        });
        onMounted(()=>{
            console.log('父元素的onMounted')
        });
        onBeforeUpdate(()=>{
            console.log('父元素的onBeforeUpdate')
        });
        onUpdated(()=>{
            console.log('父元素的onUpdated')
        });
        onBeforeUnmount(()=>{
            console.log('父元素的onBeforeUnmount')
        });
        onUnmounted(()=>{
            console.log('父元素的onUnmounted')
        });
        function fun(value:string){
            console.log('emit第一个事件');
            console.log(value)
        }
        return {
            show,
            showItem,
            info,
            obj,
            msg,
            fun,
            user,
            fullName,
            fullName2,
            fullName3,
            fullName4
        }
    },
    components:{
        ChildrenVue,
    }
})
</script>

<style scoped>

</style>